<!DOCTYPE html>
<html lang='zh-CN'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>画图实验</title>
</head>
<body>
<div>
<p>玩法：</p>
<p>看网页的人用语言描述看到的图形，伙伴在不看网页的情况下，仅根据语言描述画图。</p>
<p>描述结束后，看一下是否画的和图形一致</p>
<canvas id="myCanvas" width="800" height="600" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
</div>
<script type="text/javascript" charset="UTF-8">

//triangle("",[200,100],[100,100],[30,30]);
for (var i=0; i<randomNum(2,5);i++){
    var j=Math.round(randomNum(0,2));
    switch (j){
        case 0:drawRndCircle();break;
        case 1:drawRndTriangle();break;
        case 2://rect("",[100,200],[300,400]);break;
        drawRndRect();break;
        default: alert(j);break;
    }
    
//drawRndCircle();
//drawRndTriangle();
}

function drawRndCircle()
{   var r = randomNum(50,100);
    var x = randomNum(r,800-r);
    var y = randomNum(r,600-r);
    circle("myCanvas",x,y,r);
}

function drawRndRect()
{
    var unit=randomNum(50,100);
    var w = unit* Math.round(randomNum(0,5));
    var h=unit * 3;

    var p0=[randomNum(w,800-w),randomNum(w,600-w)];
    var p1=[p0[0]+w,p0[1]+h]
    rect("myCanvas",p0,p1);
}

function drawRndTriangle()
{
    var w=randomNum(50,200);
    var p0=[randomNum(w,800-w),randomNum(w,600-w)];
    var direct=Math.round(randomNum(0,3));
    switch (direct){
        case 0:var p1=[p0[0]+w,p0[1]];p2=[p0[0]-w,p0[1]];break;
        case 1:var p1=[p0[0]-w,p0[1]];p2=[p0[0],p0[1]+w];break;
        case 2:var p1=[p0[0],p0[1]+w];p2=[p0[0],p0[1]-w];break;
        case 3:var p1=[p0[0],p0[1]-w];p2=[p0[0]+w,p0[1]];break;
        //case 1:drawRndTriangle();break;
        defalut: alert("ooo");break;
    }

    //var p1=[randomNum(0,800),randomNum(0,600)];
    //var p2=[randomNum(0,800),randomNum(0,600)];
    triangle("myCanvas",p0,p1,p2);
}

function rect(canvasName,point0,point1){
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.moveTo(point0[0],point0[1]);
    ctx.lineTo(point1[0],point0[1]);
    ctx.lineTo(point1[0],point1[1]);
    ctx.lineTo(point0[0],point1[1]);
    ctx.lineTo(point0[0],point0[1]);
    ctx.stroke();
}

function triangle(canvasName,point0,point1,point2){
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.moveTo(point0[0],point0[1]);
    ctx.lineTo(point1[0],point1[1]);
    ctx.lineTo(point2[0],point2[1]);
    ctx.lineTo(point0[0],point0[1]);
    ctx.stroke();
}

function line(canvasName,point0,point1){
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.moveTo(point0[0],point0[1]);
    ctx.lineTo(point1[0],point1[1]);
    ctx.stroke();
}
function circle(canvasName,x,y,r){
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.beginPath();
    ctx.arc(x,y,r,0,2*Math.PI);
    ctx.stroke();
}

function randomNum(minNum,maxNum){ 
    switch(arguments.length){ 
        case 1: 
            return parseInt(Math.random()*minNum+1,10); 
        break; 
        case 2: 
            return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
        break; 
            default: 
                return 0; 
            break; 
    } 
} 
</script>

</body>
</html>